@charset "utf-8";
$zcm:20;
@function r($px) {
    @return $px/$zcm * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    background: url(../img/index/bg.png) no-repeat;
    position: relative;
    background-size: 100% 100%;
    
}

section {
    
    .logoB{
        width: r(66);
        height: r(65);
        position: absolute;
        left: r(20);
        top: r(23);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .logo1{
        width: r(178);
        height: r(29);
        position: absolute;
        left: r(97);
        top: r(42);
        img{
            width: 100%;
            height: 100%;
        }
    }
    
    .star {
        width: r(116);
        height: r(111);
        position: absolute;
        top: r(88);
        left: 50%;
        margin-left: r(-58);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .tree {
        width: r(320);
        height: r(589);
        position: absolute;
        top: r(199);
        left: 50%;
        margin-left: r(-160);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .s{
        animation: ani 2s infinite linear;
        
    }
    @keyframes ani{  
    0%{  
        opacity: 0.2;  
    }
    20%{
        opacity: 0.4;
    } 
    40%{
        opacity: 0.6;
    }
    60%{
        opacity: 0.8;
    } 
    80%{
        opacity: 0.9;
    }
    100%{  
        opacity: 1;  
    }  
}  
    
    .s3 {
        position: absolute;
        left: r(58);
        top: r(163);
        width: r(29);
        height: r(29);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .s4 {
        position: absolute;
        left: r(123);
        top: r(308);
        width: r(46);
        height: r(46);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .s1 {
        position: absolute;
        right: r(43);
        top: r(270);
        width: r(77);
        height: r(77);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .s2 {
        position: absolute;
        left: r(29);
        top: r(490);
        width: r(57);
        height: r(57);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .bu {
        position: absolute;
        width: r(554);
        height: r(102);
        left: 50%;
        margin-left: r(-277);
        bottom: r(134);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .cao1 {
        position: absolute;
        width: r(482);
        height: r(149);
        left: 50%;
        margin-left: r(-241);
        bottom: r(134);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .cao2 {
        position: absolute;
        left: r(65);
        bottom: r(288);
        width: r(196);
        height: r(188);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .cao3 {
        position: absolute;
        right: r(65);
        bottom: r(288);
        width: r(196);
        height: r(188);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .star2 {
        position: absolute;
        left: r(123);
        bottom: r(364);
        width: r(122);
        height: r(108);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .tao {
        position: absolute;
        left: r(98);
        bottom: r(184);
        width: r(125);
        height: r(125);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .apple {
        position: absolute;
        right: r(57);
        bottom: r(171);
        width: r(110);
        height: r(117);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .lian {
        position: absolute;
        left: r(150);
        bottom: r(163);
        width: r(259);
        height: r(163);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .sdyh {
        position: absolute;
        left: 50%;
        margin-left: r(-241);
        bottom: r(288);
        width: r(482);
        height: r(123);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .hls {
        position: absolute;
        left: 50%;
        margin-left: r(-160);
        bottom: r(190);
        width: r(320);
        height: r(102);
        img {
            width: 100%;
            height: 100%;
        }
    }
}

footer {
    .banyuan {
        width: r(313);
        height: r(147);
        border-radius: r(150) r(150) 0 0;
        background: #56984b;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: r(-147);
        p{
            text-align: center;
            font-size: r(36);
            color: white;
            margin-top: r(80);
        }
    }
    .sjt{
        width: r(34);
        height: r(20);
        position: absolute;
        bottom: r(80);
        left: 50%;
        margin-left: r(-10);
        img{
            width: 100%;
            height: 100%;
        }
    }
}